import React, { Component } from 'react';
import aa from '@/assets/icon_title.png';
import axios from 'axios';
import './index.scss';
class MuYing extends Component {
  constructor(props) {
    super(props);
      this.state = {
        shoplist:[]
      }

  }
  componentWillMount() {
    axios.get('./1.json').then((response) => {
      var result = response.data;
      // console.log(response.data);
      this.setState({
        shoplist : result
      })
    })
  }
  render() {
    let shoplist = this.state.shoplist;
    console.log(shoplist);
    return (
      <div className="muying">
        <div className="list-items">
          <h2 className="carry">
            <span><img src={aa} alt=""/></span>
            <span className="c_head">特惠价 仅限今日</span>
          </h2>
          <a href="http://h5.jumei.com/product/detail?type=global_deal&item_id=ht181024p1677151t1&selltype=custom&selllabel=baby_0527" className="carry-tejia">
            <img src="http://mp6.jmstatic.com/mobile/card_material/item_7710_2048_1024-ipad2048_1545899202.jpeg?imageView2/2/w/640/q/90" alt=""/>
          </a>
        </div>
        <div className="list-items">
          <h2 className="carry">
            <span><img src={aa} alt=""/></span>
            <span className="c_head">今日特惠 活动推荐</span>
          </h2>
          <ul className="today_ul">
            <li>
              <a href="http://h5.jumei.com/s/act/my_a2_190102app.html?fp=home&fpa=baby_0527" className="today-tejia">
                <img src="http://mp6.jmstatic.com/mobile/card_material/item_5640_1024_1024-ipad2048_1545982275.jpeg?imageView2/2/w/320/q/90" alt=""/>
              </a>
            </li>
            <li>
              <a href="http://mp5.jmstatic.com/mobile/card_material/item_5640_1024_1024-ipad2048_1546066549.jpeg?imageView2/2/w/320/q/90" className="today-tejia">
                <img src="http://mp5.jmstatic.com/mobile/card_material/item_5640_1024_1024-ipad2048_1546066549.jpeg?imageView2/2/w/320/q/90" alt=""/>
              </a>
            </li>
            <li>
              <a href="http://mp5.jmstatic.com/mobile/card_material/item_5640_1024_1024-ipad2048_1546066623.jpeg?imageView2/2/w/320/q/90" className="today-tejia">
                <img src="http://mp5.jmstatic.com/mobile/card_material/item_5640_1024_1024-ipad2048_1546066623.jpeg?imageView2/2/w/320/q/90" alt=""/>
              </a>
            </li>
            <li>
              <a href="http://h5.jumei.com/s/act/my_a2_190102app.html?fp=home&fpa=baby_0527" className="today-tejia">
                <img src="http://mp5.jmstatic.com/mobile/card_material/item_5640_1024_1024-ipad2048_1545982656.jpeg?imageView2/2/w/320/q/90" alt=""/>
              </a>
            </li>
            <li>
              <a href="http://h5.jumei.com/s/act/my_a2_190102app.html?fp=home&fpa=baby_0527" className="today-tejia">
                <img src="http://mp5.jmstatic.com/mobile/card_material/item_5640_1024_1024-ipad2048_1545978799.jpeg?imageView2/2/w/320/q/90" alt=""/>
              </a>
            </li>
            <li>
              <a href="http://h5.jumei.com/s/act/my_a2_190102app.html?fp=home&fpa=baby_0527" className="today-tejia">
                <img src="http://mp6.jmstatic.com/mobile/card_material/item_5640_1024_1024-ipad2048_1545964654.jpeg?imageView2/2/w/320/q/90" alt=""/>
              </a>
            </li>
          </ul>
          <ul className="today_ul metra-list">
            <li>
              <a href="http://www.baidu.com" className="today-tejia1">
                <img src="http://mp5.jmstatic.com/mobile/card_material/item_5518_1024_512-ipad2048_1539742333.png?imageView2/2/w/320/q/90" alt=""/>
              </a>
            </li>
            <li>
              <a href="http://www.baidu.com" className="today-tejia1">
                <img src="http://mp6.jmstatic.com/mobile/card_material/item_5518_1024_512-ipad2048_1533866113.jpeg?imageView2/2/w/320/q/90" alt=""/>
              </a>
            </li>
          </ul>
        </div>
        <div className="list-items">
          <h2 className="carry">
            <span><img src={aa} alt=""/></span>
            <span className="c_head">全球热销品牌</span>
          </h2>
          <div className="hot">
            <a href="http://www.baidu.com">
              <img src="http://mp5.jmstatic.com/mobile/card_material/item_2386_512_512-ipad2048_1502086238.jpeg?imageView2/2/w/160/q/90" alt=""/>
            </a>
            <a href="http://www.baidu.com">
              <img src="http://mp5.jmstatic.com/mobile/card_material/item_2386_512_512-ipad2048_1498543173.jpeg?imageView2/2/w/160/q/90" alt=""/>
            </a>
            <a href="http://www.baidu.com">
              <img src="http://mp6.jmstatic.com/mobile/card_material/item_2386_512_512-ipad2048_1498543700.jpeg?imageView2/2/w/160/q/90" alt=""/>
            </a>
            <a href="http://www.baidu.com">
              <img src="http://mp6.jmstatic.com/mobile/card_material/item_2386_512_512-ipad2048_1498543621.jpeg?imageView2/2/w/160/q/90" alt=""/>
            </a>
            <a href="http://www.baidu.com">
              <img src="http://mp5.jmstatic.com/mobile/card_material/item_2386_512_512-ipad2048_1498543472.jpeg?imageView2/2/w/160/q/90" alt=""/>
            </a>
            <a href="http://www.baidu.com">
              <img src="http://mp5.jmstatic.com/mobile/card_material/item_2386_512_512-ipad2048_1498543566.jpeg?imageView2/2/w/160/q/90" alt=""/>
            </a>
            <a href="http://www.baidu.com">
              <img src="http://mp6.jmstatic.com/mobile/card_material/item_2386_512_512-ipad2048_1498543264.jpeg?imageView2/2/w/160/q/90" alt=""/>
            </a>
            <a href="http://www.baidu.com">
              <img src="http://mp6.jmstatic.com/mobile/card_material/item_2386_512_512-ipad2048_1498559288.jpeg?imageView2/2/w/160/q/90" alt=""/>
            </a>
          </div>
        </div>
        <div className="list-items">
          <h2 className="carry">
            <span><img src={aa} alt=""/></span>
            <span className="c_head">疯狂专场 早10点上新</span>
          </h2>
          <ul className="tuan-list">
            {
              shoplist.map((item,index) => {
                return(
                  <li key={index}>
                  <a href="http://www.baidu.com" className="clearfix">
                    <div className="list-img">
                      <img src={item.image_url_set.main['320']} alt=""/>
                      <span className="list-img-manjian">{item.discount_string}</span>
                    </div>
                    <div className="list-info">
                      <h2>{item.title}</h2>
                      <span>仅剩03天14小时00分</span>
                    </div>
                    <div className="list-logo">
                      <img src={item.image_url_set.brand['320']} alt=""/>
                    </div>
                  </a>
                </li>
                )
              })
            }
          </ul>
        </div>
      </div>
    );
  }
}

export default MuYing;
